﻿<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI拖拽到Table表格特效 - 站长素材</title>

<!--导入jquery插件-->
<script type="text/javascript" src="jQuery1.11.3.min.js"></script>
<!--导入jqueryUI插件-->
<script type="text/javascript" src="jquery-ui.js"></script>

<!--自写脚本-->
<script type="text/javascript" language="javascript">
   //在页面加载完之后加载jquery
   $().ready(function(e) {
       //拖拽复制体
     $('.draggable').draggable({
		   helper:"clone",
		   cursor: "move"
		 });

		//释放后
	   $('.target').droppable({
			drop:function(event,ui){
				// $(this).children().remove();
        		console.log(ui.draggable.html(),'ui')
				var source = ui.draggable.clone();
				$(this).append(source);

			}
		});
     });
</script>
<!--自写脚本-->
</head>

<body>
<center>

<div style="border:1px solid red;width:100px;height:300px;">
    <div class="draggable"  style="background:red;" >取证类文书</div>
</div>


<div class="target" style="border:1px solid red;width:100px;height:300px;">
111
</div>

</center>
</div>
</body>

